<template>
  <div class="app-store page-container">
    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-box">
        <a-input-search
          placeholder="搜索名称..."
          class="search-input"
          @search="onSearch"
          :enter-button="false"
        >
          <template #addonAfter>
            <a-select
              v-model="searchType"
              class="search-select"
              :bordered="false"
              dropdown-class-name="search-select-dropdown"
            >
              <a-select-option value="site">站内搜索</a-select-option>
              <a-select-option value="all">全网络搜索</a-select-option>
            </a-select>
          </template>
        </a-input-search>
      </div>
    </div>

    <!-- 分类标签 -->
    <div class="category-section">
      <div class="category-wrapper">
        <!-- 固定的全部分类按钮 -->
        <a-radio-button
          value="all"
          class="fixed-all-category"
          @click="handleShowAll"
        >
          <span class="category-btn">全部分类</span>
        </a-radio-button>
        <!-- 可滚动的标签容器 -->
        <div class="scrollable-categories">
          <a-radio-group
            v-model="currentCategory"
            button-style="solid"
            @change="handleCategoryChange"
          >
            <a-radio-button
              v-for="category in categories"
              :key="category.value"
              :value="category.value"
            >
              <span class="category-btn">
                <a-icon :type="getCategoryIcon(category.value)" />
                {{ category.label }}
              </span>
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </div>

    <!-- 应用列表 -->
    <a-row :gutter="[8, 8]" class="app-list">
      <a-col :xs="8" :sm="8" :md="6" :lg="6" v-for="app in apps" :key="app.id">
        <a-card
          class="app-card"
          :bordered="false"
          @click="handleCardClick(app)"
        >
          <div class="card-content">
            <!-- GPTs标签 - 右上角 -->
            <div v-if="app.flag" class="app-tag">{{ app.flag }}</div>

            <!-- 图标 -->
            <div class="app-icon-wrapper">
              <a-icon :type="app.icon" class="app-icon" />
            </div>

            <!-- 文本内容 -->
            <div class="text-content">
              <a-tooltip placement="top">
                <template #title>{{ app.name }}</template>
                <h3 class="app-name">{{ app.name }}</h3>
              </a-tooltip>
              <a-tooltip placement="top">
                <template #title>{{ app.description }}</template>
                <p class="app-description">{{ app.description }}</p>
              </a-tooltip>
            </div>

            <!-- 收藏图标 -->
            <div class="favorite-wrapper">
              <a-icon
                type="star"
                class="favorite-icon"
                :theme="app.isFavorite ? 'filled' : 'outlined'"
                @click.stop="toggleFavorite(app)"
              />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Card,
  Radio,
  Button,
  Icon,
  Input,
  Select,
} from "ant-design-vue";
import { queryProjectInstanceList } from "@/api/projectInstance";
import { queryDicSelect } from "@/api/website";
export default {
  name: "AppStore",
  components: {
    "a-row": Row,
    "a-col": Col,
    "a-card": Card,
    "a-radio-group": Radio.Group,
    "a-radio-button": Radio.Button,
    "a-button": Button,
    "a-icon": Icon,
    "a-input-search": Input.Search,
    "a-select": Select,
    "a-select-option": Select.Option,
  },
  data() {
    return {
      currentCategory: "all",
      searchType: "site", // 'site' or 'all'
      apps: [],
      loading: false,
      categories: [],
    };
  },
  created() {
    this.fetchCategories();
    this.fetchApps();
  },
  methods: {
    async fetchCategories() {
      try {
        const response = await queryDicSelect({
          dicTypeUniqueCode: "ProjectCategory",
        });
        if (response.code === 200) {
          this.categories = response.data.map((item) => ({
            value: item.value,
            label: item.name,
          }));
        } else {
          this.$message.error(response.message || "获取分类数据失败");
        }
      } catch (error) {
        console.error("获取分类数据失败:", error);
        this.$message.error("获取分类数据失败");
      }
    },
    async fetchApps() {
      this.loading = true;
      try {
        const params = {
          realmName: window.location.origin,
          category:
            this.currentCategory === "all" ? null : this.currentCategory,
          projectType: null,
          source: null,
        };

        const response = await queryProjectInstanceList(params);
        if (response.code === 200) {
          this.apps = response.data;
        } else {
          this.$message.error(response.message || "获取应用列表失败");
        }
      } catch (error) {
        console.error("获取应用列表失败:", error);
        this.$message.error("获取应用列表失败");
      } finally {
        this.loading = false;
      }
    },
    onSearch(value) {
      console.log("搜索:", value);
      // 实现搜索逻辑
    },
    toggleFavorite(app) {
      app.isFavorite = !app.isFavorite;
    },
    async handleCardClick(app) {
      if (event.target.closest(".favorite-wrapper")) {
        return;
      }

      try {
        // 跳转到应用详情页面
        await this.$router.push({
          path: "/app/detail",
          query: {
            id: app.id,
            name: app.name,
            icon: app.icon,
            description: app.description,
            category: app.category,
            flag: app.flag,
            isFavorite: app.isFavorite,
          },
        });
      } catch (error) {
        console.error("Navigation error:", error);
      }
    },
    getCategoryIcon(categoryValue) {
      const iconMap = {
        general: "robot",
        account: "user",
        matrix: "cluster",
        private: "team",
      };
      return iconMap[categoryValue] || "appstore";
    },
    handleShowAll() {
      this.currentCategory = "all";
      this.fetchApps();
    },
    handleCategoryChange() {
      this.fetchApps();
    },
  },
};
</script>

<style lang="less" scoped>
.app-store {
  .search-section {
    margin-bottom: 8px;
    padding: 0 16px;

    .search-box {
      max-width: 600px;
      margin: 0 auto;

      .search-input {
        :deep(.ant-input) {
          border-radius: 4px 0 0 4px;
          height: 32px;
          font-size: 13px;
          color: #333;
          border-right: none;

          &::placeholder {
            color: #999;
            font-size: 13px;
          }

          &:focus,
          &:hover {
            border-color: #d9d9d9;
          }
        }

        :deep(.ant-input-group-addon) {
          padding: 0;
          border: 1px solid #d9d9d9;
          border-left: none;
          border-radius: 0 4px 4px 0;
          background: #fff;
        }

        .search-select {
          width: 120px;

          :deep(.ant-select-selector) {
            height: 30px;
            padding: 0 24px 0 8px;
            border: none;
            background: transparent;

            .ant-select-selection-item {
              line-height: 30px;
              color: #333;
              font-size: 13px;
              padding-right: 0;
            }
          }

          :deep(.ant-select-arrow) {
            color: #666;
            right: 6px;
          }
        }

        @media screen and (max-width: 768px) {
          .search-select {
            width: 100px;

            :deep(.ant-select-selector) {
              padding: 0 20px 0 8px;

              .ant-select-selection-item {
                font-size: 12px;
              }
            }

            :deep(.ant-select-arrow) {
              right: 15px;
            }
          }
        }

        @media screen and (max-width: 375px) {
          .search-select {
            width: 90px;
          }
        }
      }
    }
  }

  .category-section {
    margin-bottom: 6px;
    position: relative;
    padding: 0 16px;

    .category-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    // 固定的全部分类按钮样式
    .fixed-all-category {
      flex-shrink: 0;
      height: 32px;
      line-height: 30px;
      padding: 0 16px;
      border-radius: 16px !important;
      border: 1px solid #e8e8e8 !important;
      background: #fff;
      white-space: nowrap;
      transition: all 0.3s ease;

      &.ant-radio-button-wrapper-checked {
        background: #1890ff;
        border-color: #1890ff !important;
        color: #fff;
        box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
      }

      &:hover {
        color: #1890ff;
        border-color: #1890ff !important;
      }
    }

    // 可滚动的标签容器
    .scrollable-categories {
      flex: 1;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;

      // 自定义滚动条样式
      &::-webkit-scrollbar {
        height: 4px;
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;

        &:hover {
          background: rgba(0, 0, 0, 0.2);
        }
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      // 添加渐变遮罩效果
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 24px;
        background: linear-gradient(
          to left,
          #fff 0%,
          rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none;
      }

      .ant-radio-group {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 4px 0;
        min-width: min-content;
      }
    }

    .ant-radio-button-wrapper {
      height: 32px;
      line-height: 30px;
      padding: 0 16px;
      border-radius: 16px !important;
      border: 1px solid #e8e8e8 !important;
      background: #fff;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.3s ease;

      &:before {
        display: none;
      }

      &.ant-radio-button-wrapper-checked {
        background: #1890ff;
        border-color: #1890ff !important;
        color: #fff;
        box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
      }

      &:not(.ant-radio-button-wrapper-checked):hover {
        color: #1890ff;
        border-color: #1890ff !important;
      }
    }

    .category-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;

      .anticon {
        font-size: 14px;
      }
    }
  }

  .app-card {
    cursor: pointer; // 添加鼠标手型
    height: 120px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px); // 添加悬浮效果
    }

    :deep(.ant-card-body) {
      padding: 12px;
      height: 100%;
    }

    .card-content {
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    // GPTs标签
    .app-tag {
      position: absolute;
      right: 0;
      top: 0;
      padding: 2px 6px;
      font-size: 11px;
      color: #52c41a;
      background: #f6ffed;
      border: 1px solid #b7eb8f;
      border-radius: 4px;
      line-height: 1;
    }

    // 图标
    .app-icon-wrapper {
      margin-top: 4px;
    }

    .app-icon {
      font-size: 24px;
      color: #1890ff;
    }

    // 文本内容
    .text-content {
      text-align: center;
      width: 100%;
    }

    .app-name {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 500;
      color: #262626;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app-description {
      margin: 0;
      font-size: 12px;
      color: #595959;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    // 收藏图标
    .favorite-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      padding: 4px;
      z-index: 1; // 确保收藏图标在最上层
    }

    .favorite-icon {
      font-size: 14px;
      color: #faad14;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: scale(1.1);
      }
    }
  }

  @media screen and (max-width: 768px) {
    .search-section {
      margin: -16px -16px 8px -16px;
      padding: 12px;
      background: #fff;
      border-bottom: 1px solid #f0f0f0;

      .search-box {
        .search-input {
          :deep(.ant-input) {
            height: 30px;
            font-size: 12px;

            &::placeholder {
              font-size: 12px;
            }
          }

          .search-select {
            width: 110px;
            height: 30px;

            :deep(.ant-select-selector) {
              height: 30px;

              .ant-select-selection-item {
                line-height: 28px;
                font-size: 12px;
              }
            }

            :deep(.ant-select-arrow) {
              font-size: 11px;
            }
          }
        }
      }
    }

    .app-card {
      height: 100px;

      :deep(.ant-card-body) {
        padding: 8px;
      }

      .card-content {
        gap: 4px;
      }

      .app-icon {
        font-size: 20px;
      }

      .app-name {
        font-size: 12px;
        margin-bottom: 2px;
      }

      .app-description {
        font-size: 10px;
        line-height: 1.3;
      }

      .app-tag {
        padding: 1px 4px;
        font-size: 10px;
      }

      .favorite-icon {
        font-size: 12px;
      }
    }

    .category-section {
      padding: 0 12px;
      margin: 0 -16px 6px -16px;
      background: #fff;

      .fixed-all-category,
      .ant-radio-button-wrapper {
        height: 28px;
        line-height: 26px;
        padding: 0 12px;
        font-size: 12px;
      }

      .scrollable-categories {
        &::after {
          width: 16px;
        }
      }

      .category-btn {
        font-size: 12px;

        .anticon {
          font-size: 12px;
        }
      }
    }
  }

  @media screen and (max-width: 375px) {
    .app-card {
      height: 90px;

      .app-icon {
        font-size: 18px;
      }

      .app-name {
        font-size: 11px;
      }

      .app-description {
        font-size: 9px;
      }
    }
  }
}
</style>
